<!-- 一期所有样式和js都写入到html中 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"
    />
    <title>逗学教育</title>
    <link rel="stylesheet" href="../../common/css/vant.css" />
    <link rel="stylesheet" href="../../common/css/common.css" />
    <link rel="stylesheet" href="../../widget/components/choose/index.css" />

    <link rel="stylesheet" href="../../widget/components/tabbar/index.css" />

    <style>
      /*
			页面的所有css，必须有页面前缀
			如首页，则所有css以 .index- 开头
         */
      /* 导航首页头部样式 */
      .topic-top-title {
        height: 0.88rem;
        padding: 0 0.32rem;
        font-size: 0.32rem;
      }
      .topic-choose-result {
        width: 70%;
        line-height: 0.38rem;
      }
      .topic-choose-btn {
        color: rgba(222, 42, 32, 1);
      }
      .topic-replace-icon {
        height: 0.48rem;
        width: 0.48rem;
        vertical-align: -0.12rem;
      }
      /* 导航首页内部样式 */
      .topic-body-container {
        padding: 0.48rem 0.32rem 0;
      }
      .topic-van-row-container {
        padding: 0.29rem 0.39rem 0;
        border-radius: 0.2rem;
        box-shadow: 0rem 0rem 0.2rem 0rem rgba(100, 100, 100, 0.2);
      }

      .topic-body-icon {
        width: 1.5rem;
        text-align: center;
        font-size: 0.2rem;
        font-weight: bold;
        font-size: 0.24rem;
        color: rgba(76, 80, 85, 1);
      }

      .topic-body-icon-img {
        width: 0.9rem;
        height: 0.9rem;
        margin: 0 auto 0.11rem auto;
      }
      .topic-body-icon-img img {
        height: 100%;
        width: 100%;
      }

      .van-col--6 {
        margin-bottom: 0.3rem;
      }

      /* 下方推荐内容样式 */
      .topic-recommend {
        margin: 0.56rem 0 0.24rem 0;
        font-size: 0.32rem;
        font-weight: bold;
      }
      .topic-recommend-margin {
        margin-bottom: 0.48rem;
      }

      .topic-recommend-container {
        background-color: #fff;
        border-radius: 0.2rem;
        box-shadow: 0rem 0rem 0.2rem 0rem rgba(100, 100, 100, 0.2);
      }

      .topic-recommend-img {
        height: 3.86rem;
      }
      .topic-recommend-img img {
        width: 100%;
        height: 100%;
        border-radius: 0.2rem 0.2rem 0 0;
      }

      .topic-recommend-title {
        padding: 0.24rem 0.2rem 0.14rem;
        font-size: 0.28rem;
        font-weight: bold;
        color: rgba(3, 3, 3, 1);
      }

      .topic-recommend-info {
        padding: 0 0 0.33rem 0.2rem;
        font-size: 0.22rem;
        font-weight: bold;
        color: rgba(222, 42, 32, 1);
      }

      .topic-recommend-price {
        font-size: 0.3rem;
      }

      .topic-recommend-num {
        float: right;
        margin-right: 0.32rem;
        font-weight: normal;
        color: rgba(153, 153, 153, 1);
      }
      .topic-recommend-numicon {
        width: 0.4rem;
        height: 0.4rem;
        vertical-align: -0.1rem;
      }

      /* 右边弹出层样式 */
      .van-popup--right {
        width: 4.88rem;
        height: 100%;
      }

      .topic-bottom-placeholder {
        height: 0.5rem;
      }

      .van-overlay,
      .van-popup {
        position: absolute;
      }
      .page-content {
        padding-bottom: 0.98rem;
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <div class="page-top">
        <div class="page-top">
          <div
            class="flex-wrap flex-justify-between flex-center-wrap header topic-top-title"
          >
            <div class="text-ess-2 topic-choose-result">
              <div>
                {{ industry }}/{{ chooseAreaName }}/{{ chooseSubjectName }}
              </div>
            </div>
            <div class="topic-choose-btn" @click="showPop">
              <span
                ><img src="./image/topic/change.png" class="topic-replace-icon"
              /></span>
              更换科目
            </div>
          </div>
        </div>
      </div>
      <!-- ************************* 内容 *********************** -->
      <div class="page-content">
        <div class="placeholder"></div>
        <!-- loading页面 -->
        <div v-if="isShowZLLoading" class="zl-loading">
          <img
            class="zl-loading-img"
            src="../../common/image/white.png"
            alt=""
          />
        </div>
        <!-- 章节练习主页面 -->
        <div v-if="popIsShow"></div>
        <div v-else class="topic-container">
          <div class="topic-body-container">
            <div class="topic-van-row-container">
              <van-row>
                <van-col
                  span="6"
                  v-for="(item, index) of menuData"
                  :key="index"
                >
                  <div class="topic-body-icon">
                    <div class="topic-body-icon-img" @click="goTo(item)">
                      <img :src="'./image/topic/'+item.id+'.png'" alt="" />
                    </div>
                    {{ item.title }}
                  </div>
                </van-col>
                <van-col span="6">
                  <div class="topic-body-icon" @click="goToWrong(2)">
                    <div class="topic-body-icon-img">
                      <img src="./image/topic/collect.png" alt="" />
                    </div>
                    收藏
                  </div>
                </van-col>
                <van-col span="6">
                  <div class="topic-body-icon" @click="goToWrong(1)">
                    <div class="topic-body-icon-img">
                      <img src="./image/topic/wrong.png" alt="" />
                    </div>
                    错题本
                  </div>
                </van-col>
              </van-row>
            </div>
            <!-- 下方推荐内容 -->
            <div v-if="recommendData.length>0" class="topic-recommend">
              课程推荐
            </div>
            <div
              v-for="(item, index) of recommendData"
              :key="index"
              class="topic-recommend-margin"
            >
              <div
                class="topic-recommend-container"
                @click="goToDetails(item.courseid)"
              >
                <div class="topic-recommend-img">
                  <img :src="item.coverurl" alt="图片错误" />
                </div>
                <p class="text-ess-1 topic-recommend-title">{{ item.title }}</p>
                <div class="topic-recommend-info">
                  ￥<span class="topic-recommend-price">{{ item.price }}</span>
                  <span class="topic-recommend-num"
                    ><img
                      class="topic-recommend-numicon"
                      src="./image/topic/personNum.png"
                      alt=""
                    /><span>{{ item.views }}</span></span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="topic-bottom-placeholder"></div>
      </div>
      <!-- 右侧弹出层 -->
      <div v-if="popIsShow">
        <van-popup
          v-model="popIsShow"
          position="right"
          @click-overlay="closep"
          :close-on-click-overlay="clickClosePop"
        >
          <zl-choose
            :pop-is-show="popIsShow"
            :is-show-replay-btn="isShowReplayBtn"
            :unlimited="false"
            @change-industry="changeIndustry"
            @change-area="changeArea"
            @change-subject="changeSubject"
            @close-pop="closePop"
            @can-click-close="canClickClosePop"
          >
          </zl-choose>
        </van-popup>
      </div>

      <div class="page-bottom">
        <zl-tabbar :arr="[1,0,0]"></zl-tabbar>
      </div>
    </div>

    <script src="../../common/js/common.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/vant.min.js"></script>
    <script src="../../common/js/http.js"></script>
    <script src="../../widget/service/exam.service.js"></script>
    <script src="../../common/js/utils.js"></script>
    <!-- 引入choose组件 -->
    <script src="../../widget/components/choose/index.js"></script>
    <script src="../../widget/components/tabbar/index.js"></script>

    <script>
      // 注册 Popup 组件
      Vue.use(vant.Popup)
      // 注册 Layout 组件
      Vue.use(vant.Row).use(vant.Col)
      // 注册 Button 组件
      Vue.use(vant.Button)
      // 注册 Toast 组件
      Vue.use(vant.Toast)
      Vue.use(vant.Dialog)

      new Vue({
        el: '#app',
        components: {
          'zl-choose': choose,
          'zl-tabbar': tabbar
        },
        data: {
          // 选中的行业
          industry: '',
          // 用来判断子组件是否含重置按钮
          isShowReplayBtn: true,
          // 用来判断弹出层是否显示
          popIsShow: true,
          clickClosePop: false,
          // 选中的地区名
          chooseAreaName: '',
          // 选中的科目名
          chooseSubjectName: '',
          // 题库首页菜单导航图标数据
          menuData: [],
          // 推荐内容
          recommendData: [],
          // 选取后的选择数据
          subjectData: {},
          areaData: {},
          isShowZLLoading: true
        },
        computed: {},
        methods: {
          // 专业选择
          changeIndustry(data) {
            this.industry = data
          },
          // 子组件传来的所选地区名
          changeArea(data) {
            this.chooseAreaName = data
          },
          // 子组件传来的所选科目名
          changeSubject(data) {
            this.chooseSubjectName = data
          },
          // 弹出层按钮确认事件
          closePop(data) {
            this.popIsShow = false
            let arId, subId
            try {
              arId = JSON.parse(data.areaData1).id
              subId = String(JSON.parse(data.subjectData1).id)
            } catch (err) {}
            const classifyObj = {
              majorid: data.industryId1,
              addressid: arId,
              cateid: subId
            }
            // 请求分类信息
            examService.getTopicClassify(classifyObj).then(res1 => {
              this.menuData = res1
              this.isShowZLLoading = false
            })
            // 请求推荐信息
            examService.getRecommendInfo(classifyObj).then(res2 => {
              this.recommendData = res2
            })
          },
          closep() {
            if (this.clickClosePop === true) {
              this.isShowZLLoading = false
            }
          },
          // 更换科目按钮
          showPop() {
            this.popIsShow = true
            this.isShowZLLoading = true
          },
          canClickClosePop(data) {
            this.clickClosePop = data
          },
          // 导航图标跳转
          goTo(item) {
            if (item.iscanuse === 0) {
              this.$dialog
                .confirm({
                  message: `还未激活${item.title},请激活后使用`,
                  confirmButtonText: '查看详情'
                })
                .then(() => {
                  // on confirm
                  location.href = `../courseCenter/videoCourse.html?courseid=${item.courseid}`
                })
                .catch(() => {
                  // on cancel
                })
              return
            }
            const { subjectData1 } = getLStorageObj(['subjectData1'])
            try {
              let subject = JSON.parse(subjectData1)
              location.href = `./chapter.html?typeid=${item.id}&&cateid=${subject.id}&&title=${item.title}`
            } catch (err) {}
          },
          // 错题图标跳转
          goToWrong(type) {
            let cateid = this.subjectData.id
            location.href = `./wrong.html?cateid=${cateid}&&type=${type}`
          },
          // 推荐内容跳转
          goToDetails(courseid) {
            window.location.href = `../courseCenter/videoCourse.html?courseid=${courseid}`
          }
        },
        created() {
          const queryObj = utils.getQuery(location.href)
          // 如果是从购买课程的公众号跳转过来则采用传过来的数据
          if (queryObj.iname) {
            // 将localstorage里面存的科目选择替换掉
            this.popIsShow = false
            this.industry = queryObj.iname
            this.chooseAreaName = queryObj.aname
            this.chooseSubjectName = queryObj.sname
            const cateObj = {
              majorid: queryObj.majorid,
              addressid: queryObj.addressid,
              cateid: queryObj.cateid
            }
            // 请求分类信息
            examService.getTopicClassify(cateObj).then(res => {
              this.menuData = res
              this.isShowZLLoading = false
            })
            // 请求推荐信息
            examService.getRecommendInfo(cateObj).then(res2 => {
              this.recommendData = res2
            })
            let noSelectObj = {
              areaChooseName1: this.chooseAreaName,
              subjectChooseName1: this.chooseSubjectName,
              industryChooseName1: this.industry
            }
            setLStorageObj(noSelectObj)
          } else {
            // 判断以前是否选了地区科目
            const {
              industryChooseName1,
              areaChooseName1,
              subjectChooseName1,
              subjectData1,
              areaData1,
              industryId1
            } = getLStorageObj([
              'areaChooseName1',
              'subjectChooseName1',
              'industryChooseName1',
              'subjectData1',
              'areaData1',
              'industryId1'
            ])
            try {
              let subject = JSON.parse(subjectData1)
              let area = JSON.parse(areaData1)
              // 如果存在选取历史记录 则不重新选择
              if (areaData1 || subjectData1) {
                this.popIsShow = false
                this.industry = industryChooseName1
                this.chooseAreaName = areaChooseName1
                this.chooseSubjectName = subjectChooseName1
                this.subjectData = subject
                this.areaData = area
                const cateObj = {
                  majorid: industryId1,
                  addressid: area.id,
                  cateid: subject.id
                }
                // 请求分类信息
                examService.getTopicClassify(cateObj).then(res => {
                  this.menuData = res
                  this.isShowZLLoading = false
                })
                // 请求推荐信息
                examService.getRecommendInfo(cateObj).then(res2 => {
                  this.recommendData = res2
                })
              }
            } catch (err) {
              this.popIsShow = true
            }
          }
        }
      })
    </script>
  </body>
</html>
